<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="店铺ID">
          <el-select v-model="searchInfo.shop_id" placeholder="店铺ID" :filterable="true">
            <el-option
              v-for="item in selectOption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <el-table :data="tableData" row-key="id">
        <el-table-column align="left" label="用户ID" min-width="150" prop="id" />
        <el-table-column align="left" label="用户姓名" min-width="150" prop="username" />
        <el-table-column align="left" label="商品图片" min-width="150">
          <template #default="scope">
            <div v-if="scope.row.image_urls">
              <img
                v-for="(item,index) in JSON.parse(scope.row.image_urls)"
                :key="index"
                :src="item"
                alt
                class="avatar"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column align="left" label="商品状态" min-width="150">
          <template #default="scope">{{ displayStatus(scope.row.status) }}</template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="page_size"
          :page-sizes="[10, 30, 50, 100]"
          :total="totals"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";

import { shopGoodsList, shopList } from "@/api/api";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";

let searchInfo = ref({
  shop_id: "",
  content: ""
});
let tableData = ref([]);
let totals = ref(0);
let page = ref(1);
let page_size = ref(10);
let page_p = ref(1);
let page_size_p = ref(1000);
const route = useRoute();
const shopId = computed(() => {
  return route.query && route.query.shopId ? route.query.shopId : "";
});

let selectOption = ref([]);

onMounted(() => {
  searchInfo.value.shop_id = shopId.value;
  getPlatformList();
  getList();
});

const getPlatformList = () => {
  let params = {
    page: page_p.value,
    page_size: 1000
    // page_size: page_size_p.value
  };
  shopList(params).then(response => {
    if (response.code === 0) {
      selectOption.value = response.data.list || [];
    }
  });
};
const displayStatus = computed(() => {
  return val => {
    if (val === 1) {
      return "正常";
    } else if (val === 2) {
      return "禁用";
    } else if (val === 3) {
      return "注销";
    }
  };
});

const getList = () => {
  let params = {
    page: page.value,
    page_size: page_size.value,
    shop_id: searchInfo.value.shop_id
      ? Number(searchInfo.value.shop_id)
      : undefined
  };
  shopGoodsList(params).then(response => {
    if (response.code === 0) {
      tableData.value = response.data.list || [];
      totals.value = response.data.total || 0;
    }
  });
};
const handleCurrentChange = val => {
  page.value = val;
  getList();
};
const handleSizeChange = val => {
  page_size.value = val;
  getList();
};
const onSubmit = () => {
  page.value = 1;
  page_size.value = 10;
  getList();
};
const onReset = () => {
  searchInfo.value = {
    shop_id: shopId.value
  };
  page.value = 1;
  page_size.value = 10;
  totals.value = 0;
  getList();
};
</script>
<style lang="scss" scoped>
.avatar {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}
</style>